
// 布局

@mixin lay($justify:center, $align1:center, $align2:center) {
	display: flex;
	justify-content: $justify;
	align-items: $align1;
	align-content: $align2
} 
.lay-c-c {
	@include lay(center, center, center)
}
.lay-fs-c {
	@include lay(flex-start, center, center)
}
.lay-fe-c {
	@include lay(flex-end, center, center)
}
.lay-c-c-wrap {
	@extend .lay-c-c;
	flex-wrap: wrap;
}
.lay-c-c-col {
	@extend .lay-c-c;
	flex-direction: column;
}
.lay-sa-c-c {
	@include lay(space-around, center, center)
}
.lay-sb-c-c {
	@include lay(space-between, center, center)
}
.lay-sa-s-s {
	@include lay(space-around, stretch, stretch)
}

.grid { display: flex; flex-wrap: wrap; }
.grid-square { overflow: hidden; }
.grid.col-1>* { width: 100%; }
.grid.col-2>* { width: 50%; }
.grid.col-3>* { width: 33.33%; @extend .lay-c-c; }
.grid.col-4>* { width: 25%; }
.grid.col-5>* { width: 20%; }
// .grid {
// 	display: flex; flex-wrap: wrap;
// 	// #ifdef H5
// 	> * { flex:1; @extend .lay-c-c; }; 
// 	// #endif
// 	// #ifdef MP
// 	// 小程序不支持css的通配符，下面罗列了部分uniapp内置组件
// 	> view  { flex:1; @extend .lay-c-c; };
// 	> scroll-view  { flex:1; @extend .lay-c-c; };
// 	> text  { flex:1; @extend .lay-c-c; }; 
// 	> button  { flex:1; @extend .lay-c-c; };
// 	> input  { flex:1; @extend .lay-c-c; };
// 	> textarea  { flex:1; @extend .lay-c-c; };
// 	> picker  { flex:1; @extend .lay-c-c; };
// 	> checkbox  { flex:1; @extend .lay-c-c; };
// 	> radio  { flex:1; @extend .lay-c-c; };
// 	> slider  { flex:1; @extend .lay-c-c; };
// 	> progress  { flex:1; @extend .lay-c-c; };
// 	> switch  { flex:1; @extend .lay-c-c; };
// 	> icon  { flex:1; @extend .lay-c-c; };
// 	> image  { flex:1; @extend .lay-c-c; };
// 	> swiper  { flex:1; @extend .lay-c-c; };
// 	> audio  { flex:1; @extend .lay-c-c; };
// 	> video  { flex:1; @extend .lay-c-c; };
// 	> map  { flex:1; @extend .lay-c-c; };
// 	> rich-text  { flex:1; @extend .lay-c-c; };
// 	> movable-area  { flex:1; @extend .lay-c-c; };
// 	> movable-view  { flex:1; @extend .lay-c-c; };
// 	> cover-view  { flex:1; @extend .lay-c-c; };
// 	> cover-image  { flex:1; @extend .lay-c-c; };
// 	// #endif
// }

// ------------ 左右/上下布局 - 固定1边，其余弹性 ------------
.flex-first {
	display: flex; 
	// #ifdef H5
	> *:first-child { flex:1 };
	// #endif
	// #ifdef MP 
	// 小程序不支持css的通配符，下面罗列了部分uniapp内置组件
	> view:first-child { flex:1 };
	> scroll-view:first-child { flex:1 };
	> text:first-child { flex:1 }; 
	> button:first-child { flex:1 };
	> input:first-child { flex:1 };
	> textarea:first-child { flex:1 };
	> picker:first-child { flex:1 };
	> checkbox:first-child { flex:1 };
	> radio:first-child { flex:1 };
	> slider:first-child { flex:1 };
	> progress:first-child { flex:1 };
	> switch:first-child { flex:1 };
	> icon:first-child { flex:1 };
	> image:first-child { flex:1 };
	> swiper:first-child { flex:1 };
	> audio:first-child { flex:1 };
	> video:first-child { flex:1 };
	> map:first-child { flex:1 };
	> rich-text:first-child { flex:1 };
	> movable-area:first-child { flex:1 };
	> movable-view:first-child { flex:1 };
	> cover-view:first-child { flex:1 };
	> cover-image:first-child { flex:1 };
	// #endif
} 
.flex-last { // 场景实例：左右分栏，左边导航栏固定，右边内容区可伸缩
	display: flex; 
	// #ifdef H5
	> *:last-child { flex:1 }; 
	// #endif
	// #ifdef MP 
	// 小程序不支持css的通配符，下面罗列了部分uniapp内置组件
	> view:last-child { flex:1 };
	> scroll-view:last-child { flex:1 };
	> text:last-child { flex:1 }; 
	> button:last-child { flex:1 };
	> input:last-child { flex:1 };
	> textarea:last-child { flex:1 };
	> picker:last-child { flex:1 };
	> checkbox:last-child { flex:1 };
	> radio:last-child { flex:1 };
	> slider:last-child { flex:1 };
	> progress:last-child { flex:1 };
	> switch:last-child { flex:1 };
	> icon:last-child { flex:1 };
	> image:last-child { flex:1 };
	> swiper:last-child { flex:1 };
	> audio:last-child { flex:1 };
	> video:last-child { flex:1 };
	> map:last-child { flex:1 };
	> rich-text:last-child { flex:1 };
	> movable-area:last-child { flex:1 };
	> movable-view:last-child { flex:1 };
	> cover-view:last-child { flex:1 };
	> cover-image:last-child { flex:1 };
	// #endif
} 

.flex-right { // 场景实例：左右分栏，左边导航栏固定，右边内容区可伸缩
	display: flex; 
	// #ifdef H5
	> *:not(:nth-child(1)) { flex:1 }; 
	// #endif
	// #ifdef MP 
	// 小程序不支持css的通配符，下面罗列了部分uniapp内置组件
	> view:not(:nth-child(1)) { flex:1 };
	> scroll-view:not(:nth-child(1)) { flex:1 };
	> text:not(:nth-child(1)) { flex:1 }; 
	> button:not(:nth-child(1)) { flex:1 };
	> input:not(:nth-child(1)) { flex:1 };
	> textarea:not(:nth-child(1)) { flex:1 };
	> picker:not(:nth-child(1)) { flex:1 };
	> checkbox:not(:nth-child(1)) { flex:1 };
	> radio:not(:nth-child(1)) { flex:1 };
	> slider:not(:nth-child(1)) { flex:1 };
	> progress:not(:nth-child(1)) { flex:1 };
	> switch:not(:nth-child(1)) { flex:1 };
	> icon:not(:nth-child(1)) { flex:1 };
	> image:not(:nth-child(1)) { flex:1 };
	> swiper:not(:nth-child(1)) { flex:1 };
	> audio:not(:nth-child(1)) { flex:1 };
	> video:not(:nth-child(1)) { flex:1 };
	> map:not(:nth-child(1)) { flex:1 };
	> rich-text:not(:nth-child(1)) { flex:1 };
	> movable-area:not(:nth-child(1)) { flex:1 };
	> movable-view:not(:nth-child(1)) { flex:1 };
	> cover-view:not(:nth-child(1)) { flex:1 };
	> cover-image:not(:nth-child(1)) { flex:1 };
	// #endif
} 

// #ifdef MP
.flex-right { display: flex; > view:not(:nth-child(1)) { flex:1 }; } // 场景实例：左右分栏，左边导航栏固定，右边内容区可伸缩
// #endif
.flex-left { display: flex; > *:not(:nth-last-child(1)) { flex:1 }; } // 场景实例：跟上面相反（nth-last-child表示从最后开始往前找元素）
.flex-bottom { display: flex; flex-direction: column; > *:nth-child(2) { flex:1 }; } // 场景实例：上下分栏，上边导航栏固定，右边内容区可伸缩
.flex-top { display: flex; flex-direction: column; > *:nth-child(1) { flex:1 }; } // 场景实例：跟上面相反

.flex1 { flex: 1}
		
.border-box { box-sizing: border-box; }
		
// =============================================================================
// 文本基础
// =============================================================================

// ------------ 字体大小 ------------
$text-xs: 20rpx; 		// 超小号
$text-sm: 24rpx; 		// 小号
$text-md: 28rpx;		// 中号
$text-lg: 32rpx;		// 大号
$text-xl: 36rpx;		// 超大号
$text-xxl: 44rpx;		// 超超大号
$text-xxxl: 60rpx;		// 超超超大号

// ------------ 颜色变量定义 ------------
$red: #e54d42;
$orange: #f37b1d;
$yellow: #fbbd08;
$olive: #8dc63f;
$green: #39b54a;
$cyan: #1cbbb4;
$blue: #0081ff;
$darkblue: #00007f;
$purple: #6739b6;
$mauve: #9c26b0;
$pink: #e03997;
$grey: #8799a3;
$gray: #aaaaaa;
$black: #333333;
$white: #ffffff;

$dark-grey: #808080;
$light-gray: #c0c0c0;
$little-gray: #c8c7cc;
$white-gray: #f8f8f8;

$color-primary: #007aff;
$color-success: #4cd964;
$color-warning: #f0ad4e;
$color-error: #dd524d;

// =============================================================================
// 文本场景
// =============================================================================
// 大标题，可用于下单成功、支付成功等的标题
.head-title { font-size: $text-xxl; font-weight: bold; } 
// 分组标题，可用于List分组标题、页面布局各个栏目标题、
.group-title { font-size: $text-xl; font-weight: bold; } 
// 普通标题
.title { font-size: $text-lg; font-weight: bold; } 
// 内容部分文字
.content-text { font-size: $text-md; }
// 备注性、辅助性说明
.note-text { font-size: $text-sm; }
.note-text-grey { font-size: $text-sm; color: $grey; }
.note-text-gray { font-size: $text-sm; color: $gray; }
// 占位说明
.placeholder { @extend .dark-grey; }
// 金额
.price::before {
	content: "¥"; 			// 自动在目标元素内容前添加"¥"
	font-size: 80%;			// 添加内容的字体是目标元素字体的80%
	margin-right: 4rpx;
}

// =============================================================================
// 文章场景
// =============================================================================
$article-title-color: #2C405A; 		// 文章标题颜色
$article-title-size: 40rpx; 			// 文章标题字体大小
$article-subtitle-color: #555555; 		// 二级标题颜色
$article-subtitle-size: 26rpx;			// 二级标题字体大小
$article-paragraph-color: #3F536E; 	// 文章段落颜色
$article-paragraph-size: 30rpx;		// 文章段落字体大小

.article-title { color: $article-title-color; font-size: $article-title-size; }
.article-subtitle { color: $article-subtitle-color; font-size: $article-subtitle-size; }
.article-text { width: $article-paragraph-color; font-size: $article-paragraph-size; }

 // 显示不全时用省略号
.ellipsis {
	width: 100%;
	overflow: hidden;			
	white-space: nowrap;		// 不换行
	text-overflow: ellipsis; 	// 省略号
	text-align: center;			// 考虑不够一行宽时居中
}
	
// =============================================================================
// 图标
// ============================================================================= 
/**
https://www.iconfont.cn/  136手机号 / fpl4hyn6rbush9rk1c
[uniapp---uniapp使用iconfont](https://blog.csdn.net/maidu_xbd/article/details/109469751)
[uniapp引入iconfont图标及解决真机中iconfont不显示的问题](https://www.cnblogs.com/goloving/p/14179502.html)
[解密 Iconfont](https://www.jianshu.com/p/aabf03b150c7)
*/
@font-face {
  font-family: 'iconfont';  /* Project id 3303467 */
  src: url('//at.alicdn.com/t/font_3303467_zivkwb652x.woff2?t=1649131393365') format('woff2'),
       url('//at.alicdn.com/t/font_3303467_zivkwb652x.woff?t=1649131393365') format('woff'),
       url('//at.alicdn.com/t/font_3303467_zivkwb652x.ttf?t=1649131393365') format('truetype');
}

[class^="icon-"] { // 选择所有class包含'icon-'的元素
	font-family: "iconfont";
	font-style: normal;
}

.icon-position:before { // 一个icon例子：定位图标
	content: "\e60b"; // &#xe60b; 要写成 "\e60b"
}

// 不必再指定icon字体大小，直接使用text-md ...
// $icon-font-size-s: 32rpx;
// $icon-font-size-m: 48rpx;
// $icon-font-size-l: 64rpx;
// $icon-font-size-xl: 80rpx;
// .iconszs { font-size: $icon-font-size-s; }
// .iconszm { font-size: $icon-font-size-m; }
// .iconszl { font-size: $icon-font-size-l; }
// .iconszxl { font-size: $icon-font-size-xl; }

// =============================================================================
// 图片
// ============================================================================= 
.logo.xxs {
	width: 24rpx;
	height: 24rpx;
}
.logo.xs {
	width: 32rpx;
	height: 32rpx;
}
.logo.sm {
	width: 40rpx;
	height: 40rpx;
}
.logo {
	display: inline-block;
	width: 48rpx;
	height: 48rpx;
}
.logo.lg {
	display: inline-block;
	width: 64rpx;
	height: 64rpx;
}
.logo.xl {
	display: inline-block;
	width: 80rpx;
	height: 80rpx;
}
.logo.xxl {
	display: inline-block;
	width: 150rpx;
	height: 150rpx;
}

// =============================================================================
// 边框 && 阴影
// ============================================================================= 

// 这里没指定border的颜色，我测试效果是border会用元素的color属性
// 如果元素想指定border颜色，再加class: .line-xxx
.solid { border: 1rpx solid; }
.solid-left { border-left: 1rpx solid; }
.solid-right { border-right: 1rpx solid; }
.solid-top { border-top: 1rpx solid; }
.solid-bottom { border-bottom: 1rpx solid; }
.dashed { border: 1rpx dashed; }
.dashed-left { border-left: 1rpx dashed; }
.dashed-right { border-right: 1rpx dashed; }
.dashed-top { border-top: 1rpx dashed; }
.dashed-bottom { border-bottom: 1rpx dashed; }

.solid2 { border: 2px solid; }
.solid2-left { border-left: 2px solid; }
.solid2-right { border-right: 2px solid; }
.solid2-top { border-top: 2px solid; }
.solid2-bottom { border-bottom: 2px solid; }
.dashed2 { border: 2px dashed; }
.dashed2-left { border-left: 2px dashed; }
.dashed2-right { border-right: 2px dashed; }
.dashed2-top { border-top: 2px dashed; }
.dashed2-bottom { border-bottom: 2px dashed; }

// 圆形边框
.round {
	border-radius: 5000rpx;
}

// 圆角边框
.radius {
	border-radius: 6rpx;
}
.radius2 {
	border-radius: 12rpx;
}
.radius3 {
	border-radius: 24rpx;
}

// 边框线颜色
.line-red { border-color: $red; }
.line-orange { border-color: $orange; }
.line-yellow { border-color: $yellow; }
.line-olive { border-color: $olive; }
.line-green { border-color: $green; }
.line-cyan { border-color: $cyan; }
.line-blue { border-color: $blue; }
.line-purple { border-color: $purple; }
.line-mauve { border-color: $mauve; }
.line-pink { border-color: $pink; }
.line-grey { border-color: $grey; }
.line-gray { border-color: $gray; }
.line-black { border-color: $black; }
.line-white { border-color: $white; }
.line-dark-grey { border-color: $dark-grey; }
.line-light-gray { border-color: $light-gray; }
.line-little-gray { border-color: $little-gray; }
.line-white-gray { border-color: $white-gray; }

.btn { // 默认按钮风格
	position: relative;
	border: 0rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0 30rpx;
	font-size: 28rpx;
	height: 64rpx;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	margin-left: initial;
	transform: translate(0rpx, 0rpx);
	margin-right: initial;
}

.btn::after { // 我分析这里配置after的作用是让uni-button:after不生效
	display: none;  
}

.btn:not([class*="bk-"]) { 	// btn默认背景色是#f0f0f0，如果显示指定了bk-x，则使用指定的背景色
	background-color: #f0f0f0; 
}

.btn[class*="line"] { 		// btn默认是有背景色的，如果显示指定了line-x，则去掉背景色设置边框色，相当于镂空效果
	background-color: transparent;
}

.btn[class*="line"]::after { // 我分析这里配置after的作用是覆盖掉uni-button:after
	content: " ";
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	top: 0;
	left: 0;
	//border: 1rpx solid currentColor; // 测试发现：如果直接使用border，会让.line-xxx无效，分开写就OK
	//border-width: 1rpx; border-style: solid; border-color: currentColor; // 分开写还是有问题，没有把uni-button::after的border覆盖，
	//所以使用button时，不能靠.line-xxx来指定边框颜色，只能使用.red .blue等指定color
	border: 1rpx solid currentColor;
	transform: scale(0.5);
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 12rpx;
	z-index: 1;
	pointer-events: none;
}
// 上面关于border的分析，如果想同时指定边框和文字的颜色，可以使用.red等，如果想单独指定边框的颜色，就做不到了，所以下面专门针对这种情况进行处理
.btn.line-red::after { border: 1rpx solid $red; }
.btn.line-orange::after { border: 1rpx solid $orange; }
.btn.line-yellow::after { border: 1rpx solid $yellow; }
.btn.line-olive::after { border: 1rpx solid $olive; }
.btn.line-green::after { border: 1rpx solid $green; }
.btn.line-cyan::after { border: 1rpx solid $cyan; }
.btn.line-blue::after { border: 1rpx solid $blue; }
.btn.line-purple::after { border: 1rpx solid $purple; }
.btn.line-mauve::after { border: 1rpx solid $mauve; }
.btn.line-pink::after { border: 1rpx solid $pink; }
.btn.line-grey::after { border: 1rpx solid $grey; }
.btn.line-gray::after { border: 1rpx solid $gray; }
.btn.line-black::after { border: 1rpx solid $black; }
.btn.line-white::after { border: 1rpx solid $white; }
.btn.line-dark-grey::after { border: 1rpx solid $dark-grey; }
.btn.line-light-gray::after { border: 1rpx solid $light-gray; }
.btn.line-little-gray::after { border: 1rpx solid $little-gray; }
.btn.line-white-gray::after { border: 1rpx solid $white-gray; }

.btn.round[class*="line"]::after {
	border-radius: 1000rpx;
}

.btn[class*="lines"]::after {
	border: 6rpx solid currentColor;
}

.btn[class*="bk-"]::after {
	display: none;
}

.btn.xs {
	padding: 0 20rpx;
	font-size: 20rpx;
	height: 48rpx;
}

.btn.sm {
	padding: 0 25rpx;
	font-size: 24rpx;
	height: 56rpx;
}

.btn.lg {
	padding: 0 35rpx;
	font-size: 32rpx;
	height: 72rpx;
}

.btn.xl {
	padding: 0 40rpx;
	font-size: 36rpx;
	height: 80rpx;
}

.btn.icon.sm {
	width: 48rpx;
	height: 48rpx;
}

.btn.icon {
	width: 64rpx;
	height: 64rpx;
	border-radius: 500rpx;
	padding: 0;
}

button.icon.lg {
	width: 80rpx;
	height: 80rpx;
}

.btn.shadow-blur::before {
	top: 4rpx;
	left: 4rpx;
	filter: blur(6rpx);
	opacity: 0.6;
}

.btn.button-hover {
	transform: translate(1rpx, 1rpx);
}

.btn.block {
	display: flex;
}

.btn[disabled] {
	opacity: 0.6;
	color: #ffffff;
}


// =============================================================================
// 导航栏
// ============================================================================= 
.nav {
	white-space: nowrap; // 不换行
}

::-webkit-scrollbar { // 注意：这个放在页面文件内不起作用，要放在(或者导入)App.vue中才会起作用
	display: none; // 隐藏滚动条
}
	
$nav-min-item-width: 60rpx;
.nav .item {
	display: inline-block;
	// height: 80rpx;
	// line-height: 80rpx;
	margin: 0 10rpx;
	padding: 0 20rpx;
	position: relative;
	// @extend .grey;
	min-width: $nav-min-item-width;
}

.nav .item.cur {
	// @extend .black;
	@extend .text-bold;
}
.nav .item.cur .cur-flag {
	height: 16rpx;
	// width: 20rpx;
	width: 100%;
	min-width: $nav-min-item-width;
	border-bottom: 4rpx solid; // 这里没指定border的颜色，我测试效果是border会用元素的color属性
}


$arc-height: 200rpx; // 高度（这里暂时写死，只有做成组件后才能由由上层定义）
$arc-bk-color: #FFE079; // 弧形背景（这里暂时写死，只有做成组件后才能由由上层定义）
.arc-box {
	overflow: hidden; // 因为内部伪元素width:140%,必然超出屏幕，所以要溢出隐藏

	.arc-box-inner {
		position: relative;	// 这里设置成relative，主要是给下面的after用，after相当于arc-box-inner的子元素
		height: $arc-height;
		opacity: 0.99; // 为什么要配置opacity？我的理解：当.arc-box的祖先元素设置过background-color后，.arc-box-inner就继承了相应的背景色，这样.arc-box-inner就变得不透明了（默认是透明的），此时位于.arc-box-inner下的.arc-box-inner::after弧形就看不到了。那么通过设置opacity属性，强制让.arc-box-inner透明，就能看到.arc-box-inner::after弧形了。
	}
  
	.arc-box-inner::after {
		width: 140%;
		height: $arc-height;
		position: absolute;	// 设置absolute相对于.arc-box-inner进行定位
		top: 0;				// top:0即跟父元素的top相同
		left: -20%; // 之所以left:20%,是因为width:140%，可以是是别的值，例如width:160%，那么left:30%才能水平居中，可以发现规律的
		z-index: -1;		// 层叠顺序：最底层显示，即让.arc-box-inner常规子元素显示在上面
		content: '';
		border-radius: 0 0 50% 50%; // 分别设置上左、上右、下左、下右的圆角
		background-color: $arc-bk-color; // 弧形背景（这里暂时写死，只有做成组件后才能由由上层定义）
	}
}



// =============================================================================
// 徽章（数字标签）
// ============================================================================= 
.badge {
	border-radius: 200rpx;
	position: absolute;
	top: -10rpx;
	right: -10rpx;
	font-size: 20rpx;
	padding: 0rpx 10rpx;
	height: 28rpx;
	color: #ffffff;
}

.badge:not([class*="bg-"]) {
	background-color: #dd514c;
}


// =============================================================================
// 头像
// ============================================================================= 
.avatar {
  font-variant: small-caps;
  margin: 0;
  padding: 0;
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
  color: #ffffff;
  white-space: nowrap;
  position: relative;
  width: 64rpx;
  height: 64rpx;
  background-size: cover;
  background-position: center;
  vertical-align: middle;
  font-size: 1.5em;
}

.avatar.sm {
  width: 48rpx;
  height: 48rpx;
  font-size: 1em;
}

.avatar.lg {
  width: 96rpx;
  height: 96rpx;
  font-size: 2em;
}

.avatar.xl {
  width: 128rpx;
  height: 128rpx;
  font-size: 2em;
}

.avatar.xxl {
  width: 160rpx;
  height: 160rpx;
  font-size: 2em;
}

.avatar.xxxl {
  width: 192rpx;
  height: 192rpx;
  font-size: 2em;
}

// 模态窗口
.modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000rpx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}

.modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}

.modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}

.dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680rpx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10rpx;
	overflow: hidden;
}

// 底部弹出对话框
.modal.bottom-modal::before {
	vertical-align: bottom;
}

.modal.bottom-modal .dialog {
	width: 100%;
	border-radius: 0;
}

.modal.bottom-modal {
	margin-bottom: -1000rpx;
}

.modal.bottom-modal.show {
	margin-bottom: 0;
}


// 组件禁用态的透明度
$disabled-opacity: 0.3; 
// 禁用状态
.disable { @extend .light-gray; }
// 点击状态
.hover { @extend .bk-white-gray; }
// 遮罩颜色
.mask { background-color: rgba(0, 0, 0, 0.4); }
// 边框
.border { border: 1px solid $little-gray; }
// 分组标记
$group-flg-width: 16rpx;
.group-flg { 
	display: inline-block;
	width: $group-flg-width;
	line-height: 160%;
	// border-radius: $group-flg-width * 2;
	border-radius: 2rpx;
}
.group-flg::after {
	content: "";
	display: inline-block;
}


// =============================================================================
// 间距
// ============================================================================= 
$xxs: 2rpx;		// 超超小号
$xs: 4rpx;		// 超小号
$sm: 10rpx;		// 小号
$md: 20rpx;		// 中号
$lg: 30rpx;		// 大号
$xl: 40rpx;		// 超大号
$xxl: 60rpx;	// 超超大号
$xxxl: 80rpx;	// 超超超大号
.pd-xxs { padding: $xxs; } .pd-h-xxs { padding-left: $xxs; padding-right:$xxs; } .pd-v-xxs { padding-top: $xxs; padding-bottom: $xxs; } 
.pd-t-xxs { padding-top: $xxs; } .pd-r-xxs { padding-right: $xxs; } .pd-b-xxs { padding-bottom: $xxs; } .pd-l-xxs { padding-left: $xxs; }
.pd-xs { padding: $xs; } .pd-h-xs { padding-left: $xs; padding-right:$xs; } .pd-v-xs { padding-top: $xs; padding-bottom: $xs; } 
.pd-t-xs { padding-top: $xs; } .pd-r-xs { padding-right: $xs; } .pd-b-xs { padding-bottom: $xs; } .pd-l-xs { padding-left: $xs; }
.pd-sm { padding: $sm; } .pd-h-sm { padding-left: $sm; padding-right:$sm; } .pd-v-sm { padding-top: $sm; padding-bottom: $sm; } 
.pd-t-sm { padding-top: $sm; } .pd-r-sm { padding-right: $sm; } .pd-b-sm { padding-bottom: $sm; } .pd-l-sm { padding-left: $sm; }
.pd-md { padding: $md; } .pd-h-md { padding-left: $md; padding-right:$md; } .pd-v-md { padding-top: $md; padding-bottom: $md; } 
.pd-t-md { padding-top: $md; } .pd-r-md { padding-right: $md; } .pd-b-md { padding-bottom: $md; } .pd-l-md { padding-left: $md; }
.pd-lg { padding: $lg; } .pd-h-lg { padding-left: $lg; padding-right:$lg; } .pd-v-lg { padding-top: $lg; padding-bottom: $lg; } 
.pd-t-lg { padding-top: $lg; } .pd-r-lg { padding-right: $lg; } .pd-b-lg { padding-bottom: $lg; } .pd-l-lg { padding-left: $lg; }
.pd-xl { padding: $xl; } .pd-h-xl { padding-left: $xl; padding-right:$xl; } .pd-v-xl { padding-top: $xl; padding-bottom: $xl; } 
.pd-t-xl { padding-top: $xl; } .pd-r-xl { padding-right: $xl; } .pd-b-xl { padding-bottom: $xl; } .pd-l-xl { padding-left: $xl; }
.pd-xxl { padding: $xxl; } .pd-h-xxl { padding-left: $xxl; padding-right:$xxl; } .pd-v-xxl { padding-top: $xxl; padding-bottom: $xxl; } 
.pd-t-xxl { padding-top: $xxl; } .pd-r-xxl { padding-right: $xxl; } .pd-b-xxl { padding-bottom: $xxl; } .pd-l-xxl { padding-left: $xxl; }
.pd-xxxl { padding: $xxxl; } .pd-h-xxxl { padding-left: $xxxl; padding-right:$xxxl; } .pd-v-xxxl { padding-top: $xxxl; padding-bottom: $xxxl; } 
.pd-t-xxxl { padding-top: $xxxl; } .pd-r-xxxl { padding-right: $xxxl; } .pd-b-xxxl { padding-bottom: $xxxl; } .pd-l-xxxl { padding-left: $xxxl; }
.mg-xxs { margin: $xxs; } .mg-h-xxs { margin-left: $xxs; margin-right:$xxs; } .mg-v-xxs { margin-top: $xxs; margin-bottom: $xxs; } 
.mg-t-xxs { margin-top: $xxs; } .mg-r-xxs { margin-right: $xxs; } .mg-b-xxs { margin-bottom: $xxs; } .mg-l-xxs { margin-left: $xxs; }
.mg-xs { margin: $xs; } .mg-h-xs { margin-left: $xs; margin-right:$xs; } .mg-v-xs { margin-top: $xs; margin-bottom: $xs; } 
.mg-t-xs { margin-top: $xs; } .mg-r-xs { margin-right: $xs; } .mg-b-xs { margin-bottom: $xs; } .mg-l-xs { margin-left: $xs; }
.mg-sm { margin: $sm; } .mg-h-sm { margin-left: $sm; margin-right:$sm; } .mg-v-sm { margin-top: $sm; margin-bottom: $sm; } 
.mg-t-sm { margin-top: $sm; } .mg-r-sm { margin-right: $sm; } .mg-b-sm { margin-bottom: $sm; } .mg-l-sm { margin-left: $sm; }
.mg-md { margin: $md; } .mg-h-md { margin-left: $md; margin-right:$md; } .mg-v-md { margin-top: $md; margin-bottom: $md; } 
.mg-t-md { margin-top: $md; } .mg-r-md { margin-right: $md; } .mg-b-md { margin-bottom: $md; } .mg-l-md { margin-left: $md; }
.mg-lg { margin: $lg; } .mg-h-lg { margin-left: $lg; margin-right:$lg; } .mg-v-lg { margin-top: $lg; margin-bottom: $lg; } 
.mg-t-lg { margin-top: $lg; } .mg-r-lg { margin-right: $lg; } .mg-b-lg { margin-bottom: $lg; } .mg-l-lg { margin-left: $lg; }
.mg-xl { margin: $xl; } .mg-h-xl { margin-left: $xl; margin-right:$xl; } .mg-v-xl { margin-top: $xl; margin-bottom: $xl; } 
.mg-t-xl { margin-top: $xl; } .mg-r-xl { margin-right: $xl; } .mg-b-xl { margin-bottom: $xl; } .mg-l-xl { margin-left: $xl; }
.mg-xxl { margin: $xxl; } .mg-h-xxl { margin-left: $xxl; margin-right:$xxl; } .mg-v-xxl { margin-top: $xxl; margin-bottom: $xxl; } 
.mg-t-xxl { margin-top: $xxl; } .mg-r-xxl { margin-right: $xxl; } .mg-b-xxl { margin-bottom: $xxl; } .mg-l-xxl { margin-left: $xxl; }
.mg-xxxl { margin: $xxxl; } .mg-h-xxxl { margin-left: $xxxl; margin-right:$xxxl; } .mg-v-xxxl { margin-top: $xxxl; margin-bottom: $xxxl; } 
.mg-t-xxxl { margin-top: $xxxl; } .mg-r-xxxl { margin-right: $xxxl; } .mg-b-xxxl { margin-bottom: $xxxl; } .mg-l-xxxl { margin-left: $xxxl; }

@mixin hspace($space) {
  content: "";
  display: inline-block;
  width: $space;
}
@mixin vspace($space) {
  content: "";
  display: inline-block;
  height: $space;
}
.hspace-xxs::after { @include hspace($xxs)}
.hspace-xs::after { @include hspace($xs)}
.hspace-sm::after { @include hspace($sm)}
.hspace-md::after { @include hspace($md)}
.hspace-lg::after { @include hspace($lg)}
.hspace-xl::after { @include hspace($xl)}
.hspace-xxl::after { @include hspace($xxl)}
.vspace-xxs::after { @include vspace($xxs)}
.vspace-xs::after { @include vspace($xs)}
.vspace-sm::after { @include vspace($sm)}
.vspace-md::after { @include vspace($md)}
.vspace-lg::after { @include vspace($lg)}
.vspace-xl::after { @include vspace($xl)}
.vspace-xxl::after { @include vspace($xxl)}


// =============================================================================
// 文本基础
// 注：上面还有一部分，为什么要分2部分写？
// 当一个元素同时使用两个类时，比如<view class="text-xxl title">，此时字体大小就有冲突，那么写在css文件后面的会优先
// =============================================================================
.red { color: $red; }
.orange { color: $orange; }
.yellow { color: $yellow; }
.olive { color: $olive; }
.green { color: $green; }
.cyan { color: $cyan; }
.blue { color: $blue; }
.darkblue { color: $darkblue; }
.purple { color: $purple; }
.mauve { color: $mauve; }
.pink { color: $pink; }
.grey { color: $grey; }
.gray { color: $gray; }
.black { color: $black; }
.white { color: $white; }
.bk-red { background-color: $red; }
.bk-orange { background-color: $orange; }
.bk-yellow { background-color: $yellow; }
.bk-olive { background-color: $olive; }
.bk-green { background-color: $green; }
.bk-cyan { background-color: $cyan; }
.bk-blue { background-color: $blue; }
.bk-purple { background-color: $purple; }
.bk-mauve { background-color: $mauve; }
.bk-pink { background-color: $pink; }
.bk-grey { background-color: $grey; }
.bk-gray { background-color: $gray; }
.bk-black { background-color: $black; }
.bk-white { background-color: $white; }

.dark-grey { color: $dark-grey; }
.light-gray { color: $light-gray; }
.little-gray { color: $little-gray; }
.white-gray { color: $white-gray; }
.bk-dark-grey { background-color: $dark-grey; }
.bk-light-gray { background-color: $light-gray; }
.bk-little-gray { background-color: $little-gray; }
.bk-white-gray { background-color: $white-gray; }

.text-primary { color: $color-primary; }
.text-smuccess { color: $color-success; }
.text-warning { color: $color-warning; }
.text-error { color: $color-error; }
.bk-primary { background-color: $color-primary; }
.bk-success { background-color: $color-success; }
.bk-warning { background-color: $color-warning; }
.bk-error { background-color: $color-error; }

.text-xs { font-size: $text-xs; }
.text-sm { font-size: $text-sm; }
.text-md { font-size: $text-md; }
.text-lg { font-size: $text-lg; }
.text-xl { font-size: $text-xl; }
.text-xxl { font-size: $text-xxl; }
.text-xxxl { font-size: $text-xxxl; }
.text-bold {
	font-weight: bold;
}


// =============================================================================
// 默认设置
// ============================================================================= 
// * { // 不能使用默认设置，一是它在小程序上不生效，因为小程序上不认通配符*；二是默认设置会让.arc-box这种依赖背景透明的不起作用
// 	@extend .black;
// 	@extend .bk-white;
// 	@extend .text-md;
// }


	// 临时
	view,image,button {
		// opacity: 0.5;
	}